<template>
  <div class="tab"
       :class="{'active':activeTab === 'tab-6'}"
       @click.stop="changeTab('tab-6')"
       @mouseout="evt => leaveTab(evt,'tab-6')"
       @mouseover="evt => hoverTab(evt,'tab-6')">7天内未跟进</div>
</template>

<script lang="ts">
  import { Component, Model, Vue } from "@some21/vue-class-decorator";

  @Component({
    name: "JuTab",
  })
  export default class extends Vue {
    @Model("change", { type: String }) readonly ActiveTab!: string;

    tabHover = {
      left: 0,
      width: 0,
      height: 0,
    };
    // changeTab(tab) {
    //   this.activeTab = tab;
    // }
    leaveTab() {
      this.tabHover.height = 0;
    }
    hoverTab(evt) {
      const target = evt.target;
      this.tabHover.left = target.offsetLeft;
      this.tabHover.width = target.clientWidth;
      this.tabHover.height = target.clientHeight;
    }
  }
</script>

<style lang="scss" scoped>
  .tab {
    cursor: pointer;
    display: inline-block;
    margin: 0 0.125rem;
    padding: 0.5rem 0.75rem 0.25rem;
    border-bottom: none;
    border-radius: 0.25rem;
    font-size: 90%;

    &:first-of-type {
      margin-left: 0.5rem;
    }
    &:last-of-type {
      margin-right: 0.5rem;
    }

    &.active {
      color: var(--theme-white);
      background-color: var(--theme-primary);
    }
  }
</style>
